<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-right">
        <el-card class="login-card" shadow="hover">
          <div class="login-header">
            <h2 class="login-title">欢迎登录</h2>
            <p class="login-subtitle">请输入您的账号和密码</p>
          </div>

          <div class="login-tabs">
            <el-tabs v-model="activeTab" :stretch="true">
              <el-tab-pane label="账号登录" name="accountLogin"></el-tab-pane>
            </el-tabs>
          </div>

          <el-form ref="accountFrom" :model="accountFrom" :rules="accountRules" class="login-form">
            <el-form-item prop="username">
              <div class="input-wrapper">
                <i class="el-icon-user input-icon"></i>
                <el-input
                  class="login-input"
                  type="text"
                  v-model="accountFrom.username"
                  auto-complete="off"
                  placeholder="请输入用户名"
                  clearable
                ></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="password">
              <div class="input-wrapper">
                <i class="el-icon-lock input-icon"></i>
                <el-input
                  show-password
                  class="login-input"
                  type="password"
                  v-model="accountFrom.password"
                  auto-complete="off"
                  placeholder="请输入密码"
                  clearable
                ></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="code" class="captcha-form-item">
              <div class="captcha-wrapper">
                <div class="input-wrapper captcha-input">
                  <i class="el-icon-key input-icon"></i>
                  <el-input
                    v-model="accountFrom.code"
                    auto-complete="off"
                    placeholder="验证码"
                    class="code-input"
                    clearable
                  ></el-input>
                </div>
                <div class="captcha-image" @click="getCode">
                  <img :src="codeUrl" class="captcha-img" alt="验证码">
                  <div class="captcha-refresh">
                    <i class="el-icon-refresh"></i>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-form>

          <div class="login-options">
            <el-checkbox v-model="accountFrom.rememberMe" class="remember-checkbox">
              记住密码
            </el-checkbox>
          </div>

          <el-button
            class="login-button"
            :loading="loading"
            @click.native.prevent="handleLogin"
            type="primary"
            size="large"
          >
            <span v-if="!loading">登录</span>
            <span v-else>登录中...</span>
          </el-button>

          <div class="register-link">
            没有账号？
            <span @click="registered" class="register-text">立即注册</span>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeImg } from '@/api/login'
import { decrypt, encrypt } from '@/utils/jsencrypt'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data () {
    return {
      // 默认账号密码登录
      activeTab: 'accountLogin',
      // 账号登录表单数据
      accountFrom: {
        username: '',
        password: '',
        code: '',
        // 记住我
        rememberMe: true
      },
      // codeUrl
      codeUrl: '',
      // 是否显示加载
      loading: false,
      // 注册开关
      register: false,
      redirect: undefined,
      // 账号登录表单数据校验
      accountRules: {
        username: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入您的账号'
          }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入您的密码'
          }
        ],
        code: [
          {
            required: true,
            trigger: 'change',
            message: '请输入验证码'
          }
        ]
      },
    }
  },
  created () {
    // 获取验证码
    this.getCode()
    // 页面一加载去看看 localStorage 有没有数据有就渲染上
    this.getLocalStorage()
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    // 登录按钮
    handleLogin () {
      // 账号登录
      this.$refs.accountFrom.validate(valid => {
        if (valid) {
          // 加载
          this.loading = true
          if (this.accountFrom.rememberMe) {
            // 如果点了记住密码就存在 localStorage
            localStorage.setItem('username', this.accountFrom.username)
            localStorage.setItem('password', encrypt(this.accountFrom.password))
            localStorage.setItem('rememberMe', this.accountFrom.rememberMe)
          } else {
            localStorage.removeItem('username')
            localStorage.removeItem('password')
            localStorage.removeItem('rememberMe')
          }
          // 登录
          this.$store.dispatch('user/Login', this.accountFrom).then((res) => {

            this.$notify({
              title: '登录成功',
              message: `欢迎回来 ${this.accountFrom.username}`,
              type: 'success',
              position: 'top-left'
            })
            
            this.$router.push({ path: this.redirect || '/office/index' }).catch(() => {
            })

          }).catch(() => {
            this.loading = false
            if (this.captchaEnabled) {
              this.getCode()
            }
          })
        }
      })
    },
    // 看看 localStorage 中有没有数据有就渲染上
    getLocalStorage () {
      const username = localStorage.getItem('username')
      const password = localStorage.getItem('password')
      const rememberMe = localStorage.getItem('rememberMe')
      this.accountFrom = {
        username: username === undefined ? '' : username,
        password: password == undefined ? '' : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    // 注册
    registered () {
      // 跳转到注册页
      this.$router.push({ name: 'Register' })
    },
    // 获取验证码
    getCode () {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (this.captchaEnabled) {
          this.codeUrl = 'data:image/gif;base64,' + res.img
          this.accountFrom.uuid = res.uuid
        }
      })
    },
  },
}
</script>

<style scoped>
/* 全局容器样式 */
.login-container {
  min-height: 100vh;
  background-image: url('@/assets/image/login.png');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.login-wrapper {
  display: flex;
  max-width: 400px;
  width: 100%;
  min-height: 480px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(10px);
  margin-left: 60px;
}


/* 登录区域 */
.login-right {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(248, 250, 252, 0.95);
}

.login-card {
  width: 100%;
  max-width: 360px;
  border: none;
  border-radius: 16px;
  padding: 30px 25px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
}

.login-header {
  text-align: center;
  margin-bottom: 25px;
}

.login-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 6px 0;
}

.login-subtitle {
  color: #6b7280;
  margin: 0;
  font-size: 0.9rem;
}

/* 标签页样式 */
.login-tabs {
  margin-bottom: 20px;
}

.login-tabs >>> .el-tabs__header {
  margin: 0;
}

.login-tabs >>> .el-tabs__item {
  font-size: 15px;
  font-weight: 500;
  color: #6b7280;
  border: none;
}

.login-tabs >>> .el-tabs__item.is-active {
  color: #059669;
  font-weight: 600;
}

.login-tabs >>> .el-tabs__active-bar {
  background-color: #059669;
  height: 3px;
  border-radius: 3px;
}

/* 表单样式 */
.login-form {
  margin-bottom: 20px;
}

.login-form >>> .el-form-item {
  margin-bottom: 18px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 15px;
  z-index: 3;
  color: #9ca3af;
  font-size: 16px;
}

.login-input >>> .el-input__inner {
  height: 45px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding-left: 45px;
  font-size: 15px;
  background: rgba(249, 250, 251, 0.8);
  transition: all 0.3s ease;
  box-shadow: none;
}

.login-input >>> .el-input__inner:focus {
  border-color: #059669;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.login-input >>> .el-input__inner::placeholder {
  color: #9ca3af;
}

/* 验证码样式 */
.captcha-form-item >>> .el-form-item__content {
  line-height: normal;
}

.captcha-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.captcha-input {
  flex: 1;
}

.code-input >>> .el-input__inner {
  height: 45px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding-left: 45px;
  font-size: 15px;
  background: rgba(249, 250, 251, 0.8);
  transition: all 0.3s ease;
}

.code-input >>> .el-input__inner:focus {
  border-color: #059669;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.captcha-image {
  position: relative;
  height: 45px;
  width: 110px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.captcha-image:hover {
  border-color: #059669;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
}

.captcha-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.captcha-refresh {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.captcha-image:hover .captcha-refresh {
  opacity: 1;
}

/* 登录选项 */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.remember-checkbox >>> .el-checkbox__label {
  color: #374151;
  font-size: 14px;
}

.remember-checkbox >>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #059669;
  border-color: #059669;
}

/* 登录按钮 */
.login-button {
  width: 100%;
  height: 45px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  margin-bottom: 18px;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.2);
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.3);
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
}

.login-button:active {
  transform: translateY(0);
}

/* 注册链接 */
.register-link {
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.register-text {
  color: #059669;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

.register-text:hover {
  color: #047857;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    justify-content: center;
    padding: 10px;
    background-position: center;
  }

  .login-wrapper {
    max-width: 90%;
    min-height: auto;
    margin-left: 0;
  }


  .login-right {
    padding: 20px;
  }

  .login-card {
    padding: 30px 20px;
  }

  .captcha-wrapper {
    flex-direction: column;
    gap: 15px;
  }

  .captcha-image {
    width: 100%;
    max-width: 200px;
    align-self: center;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 10px;
    background-position: center;
  }

  .login-wrapper {
    max-width: 95%;
  }

  .login-card {
    padding: 25px 15px;
  }


  .login-title {
    font-size: 1.5rem;
  }
}

/* 消除Element UI默认样式的一些冲突 */
.login-form >>> .el-form-item__error {
  padding-top: 4px;
}

.login-tabs >>> .el-tabs__content {
  padding: 0;
}
</style>
